<template>
  <div>
    <div class="formGroup">
      <el-table-form ref="form" class="form" :model="query" label-position="right">
        <el-form-item :table-form-merge="1.1" label="" label-width="0" class="merge-item">
          <el-select v-model="query.type" style="width: 200px;">
            <el-option label="签收日期" value="signTime" />
            <el-option label="下单日期" value="transactTime" />
          </el-select>
          <el-date-picker
            v-model="query.date"
            clearable
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="所属机构:" class="merge-item">
          <el-tree-select
            v-model="query.orgSNNo"
            :clearable="true"
            class="tree-select"
            :popover-width="360"
            :select-params="{
              clearable: true,
              placeholder: '请选择组织机构',
              loading: $loadingPlugin.getTreeData
            }"
            :tree-params=" {
              'default-expand-all': true,
              'expand-on-click-node': false,
              'highlight-current': true,
              props:{
                value:'orgSNNo',
                label: 'orgName',
                disabled: 'disabled',
              },
              data: treeData
            }"
            @node-click="selectTreeChange"
          />
        </el-form-item>
        <el-form-item v-if="mode===1" label="归属人:" class="merge-item">
          <el-select v-model.trim="query.ownerId" clearable placeholder="请选择">
            <el-option v-for="l in userData" :key="l.userId" :value="l.userId" :label="l.userName" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="mode===2" label="客户编号:" class="merge-item">
          <el-input v-model.trim.trim="query.csmCode" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="mode===2" label="客户名称:" class="merge-item">
          <el-input v-model.trim="query.csmName" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="mode===2" label="客户电话:" class="merge-item">
          <el-input v-model.trim="query.contactPhone" clearable placeholder="请输入" />
        </el-form-item>
        <template v-slot:btns>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </template>
      </el-table-form>
    </div>
    <div style="margin-bottom: 10px;" class="btn-group">
      <div />
      <div>
        <el-select v-model="mode" style="width: 150px;" @change="modeChange">
          <el-option :value="1" label="配送员模式" />
          <el-option :value="2" label="客户模式" />
        </el-select>
      </div>
    </div>
    <lb-table
      v-if="mode===1"
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:10}"
      v-loading="$loadingPlugin.fetchDataLeft"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableDataForPeiSong.column"
      :data="tableDataForPeiSong.data"
      pagination
      :total="tableDataForPeiSong.total"
      custom-column
      @fetch="fetchDataLeft"
    />
    <lb-table
      v-if="mode===2"
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:10}"
      v-loading="$loadingPlugin.fetchDataRight"
      border
      highlight-current-row
      element-loading-text="加载中"
      :column="tableDataForUsers.column"
      :data="tableDataForUsers.data"
      pagination
      :total="tableDataForUsers.total"
      custom-column
      @fetch="fetchDataRight"
    />
    <dispose ref="dispose" :payment-method-map="PaymentMethodMap" :pay-status-map="PayStatusMap" @refresh="refresh" />
    <detail ref="detail" />
  </div>
</template>

<script>
  import getTreeData from '@/utils/jsonTree'
  // import tableData from './data.json'
  import { mapGetters } from 'vuex'
  import { orderbillNewReceiptList, orderbillNewReceiptListforCsm, searchOrgidList, queryMap } from '@/api'
  export default {
    name: 'orderReceipt',
    components: {
      dispose: require('./components/dispose.vue').default,
      detail: require('./components/detail.vue').default
    },
    data() {
      return {
        treeData: [],
        searchParams: {},
        mode: 1,
        PaymentMethodMap: [],
        PayStatusMap: [],
        userData: [], // 处理人
        query: {
          type: 'signTime',
          date: [new Date().setHours(0), new Date().setHours(23)],
          csmCode: null,
          csmName: null,
          contactPhone: null
        },
        tableDataForPeiSong: {
          //     	{title: '处理人/配送员', field: 'ownerName', width: 200, align: 'center'},
          // {title: '客户名称', field: 'csmName', width: 200, align: 'center'},
          // {title: '未签收未回执', field: 'noSignNoReceiptCount', width: 200, align: 'center',formatter:this.formatter.noSignWindowFormat1},
          // {title: '未签收应收金额', field: 'noSignTReceivablesCount', width: 200, align: 'center',formatter:this.formatter.noSignWindowFormat2},
          // {title: '已签收未回执', field: 'signNoReceiptCount', width: 200, align: 'center',formatter:this.formatter.signWindowFormat1},
          // {title: '签收未回执应收金额', field: 'signNoReceiptTReceivablesCount', width: 300, align: 'center',formatter:this.formatter.signWindowFormat2}
          total: 0,
          column: [
            {
              prop: 'ownerName',
              label: '处理人/配送员',
              align: 'center'
              // render: (h, { row }) => <el-link onClick={() => this.openDetail(row)}>{row.orderCode}</el-link>
            },
            { label: '未签收未回执', prop: 'noSignNoReceiptCount', width: 200, align: 'center',
              render: (h, { row }) => <el-link onClick={() => this.openDetail(row)}>{row.noSignNoReceiptCount}</el-link>
            },
            { label: '未签收应收金额', prop: 'noSignTReceivablesCount', width: 200, align: 'center',
              render: (h, { row }) => <el-link onClick={() => this.openDetail(row)}>{row.noSignTReceivablesCount}</el-link>
            },
            {
              prop: 'signNoReceiptCount',
              label: '已签收未回执',
              align: 'center',
              showOverflowTooltip: true,
              render: (h, { row }) => <el-link onClick={() => this.openDispose(row)}>{row.signNoReceiptCount}</el-link>

            },
            {
              prop: 'signNoReceiptTReceivablesCount',
              label: '签收未回执应收金额',
              align: 'center',
              render: (h, { row }) => <el-link onClick={() => this.openDispose(row)}>{row.signNoReceiptTReceivablesCount}</el-link>
            }

          ],
          data: []
        },
        tableDataForUsers: {
          total: 0,
          column: [
            {
              prop: 'csmName',
              label: '客户名称',
              align: 'center'
            },
            { label: '未签收未回执', prop: 'noSignNoReceiptCount', width: 200, align: 'center',
              render: (h, { row }) => <el-link onClick={() => this.openDetail(row)}>{row.noSignNoReceiptCount}</el-link>
            },
            { label: '未签收应收金额', prop: 'noSignTReceivablesCount', width: 200, align: 'center',
              render: (h, { row }) => <el-link onClick={() => this.openDetail(row)}>{row.noSignTReceivablesCount}</el-link>
            },
            {
              prop: 'signNoReceiptCount',
              label: '已签收未回执',
              align: 'center',
              showOverflowTooltip: true,
              render: (h, { row }) => <el-link onClick={() => this.openDispose(row)}>{row.signNoReceiptCount}</el-link>
            },
            {
              prop: 'signNoReceiptTReceivablesCount',
              label: '签收未回执应收金额',
              align: 'center',
              render: (h, { row }) => <el-link onClick={() => this.openDispose(row)}>{row.signNoReceiptTReceivablesCount}</el-link>
            }
          ],
          data: []
        }
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    mounted() {
      // console.log(this.organization)
      this.getTreeData()
      this.getPayStatus()
    },
    methods: {
      // 模式改变
      modeChange() {
        if (this.mode === 1) {
          this.fetchDataLeft({})
        } else if (this.mode === 2) {
          this.fetchDataRight({})
        }
      },
      async fetchDataLeft({ currentPage = 1, pageSize = 20 }) {
        const params = {
          currentPage,
          pageSize,
          'orgSNNo': this.query.orgSNNo, 'ownerId': this.query.ownerId
        }
        if (this.query.date) {
          params[this.query.type] = this.query.date[0]
          params[`${this.query.type}End`] = this.query.date[1]
        }
        const res = await orderbillNewReceiptList(params)
        this.tableDataForPeiSong.data = res.data.rows
        this.searchParams = params
        if (currentPage === 1) this.tableDataForPeiSong.total = res.data.total
      },
      async fetchDataRight({ currentPage = 1, pageSize = 20 }) {
        const params = {
          currentPage,
          pageSize,
          'orgSNNo': this.query.orgSNNo, 'csmCode': this.query.csmCode, 'csmName': this.query.csmName, 'contactPhone': this.query.contactPhone
        }
        if (this.query.date) {
          params[this.query.type] = this.query.date[0]
          params[`${this.query.type}End`] = this.query.date[1]
        }
        const res = await orderbillNewReceiptListforCsm(params)
        this.tableDataForUsers.data = res.data.rows
        this.searchParams = params
        if (currentPage === 1) this.tableDataForUsers.total = res.data.total
      },
      refresh() {
        this.search()
      },
      // 搜索
      search() {
        if (this.mode === 1) {
          this.fetchDataLeft({})
        } else if (this.mode === 2) {
          this.fetchDataRight({})
        }
      },
      // 机构数据
      async getTreeData() {
        // const res = await organizationQueryList({})
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      async selectTreeChange(value) {
        if (this.mode === 1) {
          const params = {
            orgId: value.orgId,
            corpparm1: 1
          }
          const res = await searchOrgidList(params)
          this.userData = res.data
        }
      },
      openDispose(row) {
        var params = {}
        if (this.mode === 1) {
          params = {
            ...this.searchParams, 'ownerId': row.ownerId, 'orderStatus': 10
          }
        }
        if (this.mode === 2) {
          params = {
            ...this.searchParams, 'csmId': row.csmId, 'orderStatus': 10
          }
        }

        this.$refs.dispose.open(params)
      },
      openDetail(row) {
        var params = {}
        if (this.mode === 1) {
          params = {
            ...this.searchParams, 'ownerId': row.ownerId, 'orderStatus': 0
          }
        }
        if (this.mode === 2) {
          params = {
            ...this.searchParams, 'csmId': row.csmId, 'orderStatus': 0
          }
        }
        this.$refs.detail.open(params)
      },
      async getPayStatus() {
        const res1 = await queryMap({ enumName: 'PaymentMethod' })
        const res2 = await queryMap({ enumName: 'PayStatus' })
        this.PaymentMethodMap = res1.data
        this.PayStatusMap = res2.data
      }
    }
  }
</script>

<style scoped lang="scss">
.formGroup {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-form-item .el-form-item {
  margin-bottom: 0;
}
.merge-item {
  /deep/ .el-form-item__content {
    display: flex;
  }
}
</style>
